<template>
	<view>
		<movable-area class="movable-area">
			<movable-view class="movable-view" :x="x" :y="y" direction="all">
				<!-- <button @click="selectJsdm">{{jsdm}}</button> -->
				<view class="content">
					<select-lay-y :value="value" slabel="type" svalue="typeid" :placeholder="jsdm" :options="datalist"
						:showplaceholder="false" @selectitem="selectitem">
					</select-lay-y>
				</view>
			</movable-view>
		</movable-area>

		<!-- <view v-if="isPop" class="mask">
			<view class="content">
				<select-lay-y :value="value" slabel="type" svalue="typeid" placeholder="请选择节水代码" :options="datalist" :showplaceholder="false" 
					@selectitem="selectitem">
				</select-lay-y>
				<view style="display: flex; flex-direction: row;margin-top: 20px;">
					<view @click.stop="finsh"
						style="width: 100px;height: 35px;border: 1px solid #2697F9;color: #2697F9;border-radius: 20px;display: flex;justify-content: center;align-items: center;">
						取消</view>
					<view style="flex: 1;"></view>
					<view @click.stop="SetData"
						style="width: 100px;height: 25px;border: 1px solid #2697F9;color: white;background-color: #2697F9;border-radius: 20px;display: flex;justify-content: center;align-items: center;margin-right: 5px;">
						确定
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		appUserChange
	} from '../../common/api.js'
	import {
		aes_encrypt,
		aes_Decrypt
	} from '../../common/aesutils.js'

	const appword = "aKd20dbGdFvmuwrt" // 固定值

	export default {
		data() {
			return {
				x: 320, //x坐标
				y: 520, //y坐标
				isPop: false,
				datalist: [],
				value: '',

				viewTop: null, // 创建原生View控件
				viewBottom: null // 创建原生View控件

			}
		},

		props: {
			jsdm: {
				type: String,
				default: function() {
					return uni.getStorageSync('username')
				}
			},
		},

		watch: {
			jsdm: {
				handler(newVal) {
					if (newVal === this.jsdm) {
						this.$nextTick(() => {
							var that = this
							
							let jsdmList = JSON.parse(uni.getStorageSync("jsdmList"))
								
							if (jsdmList.length > 0) {
								that.datalist = []
								jsdmList.forEach((item, index) => {
									var itemJsdm = {
										type: item,
										typeid: index + "",
									}
									that.datalist.push(itemJsdm)
								})
							}

							console.log('节水代码--------------', this.datalist)
						})
					}
				}
			},
		},
		
		updated() {
			this.jsdm = uni.getStorageSync('username')
		},

		mounted() {
			var that = this
			let jsdmList = JSON.parse(uni.getStorageSync("jsdmList"))

			if (jsdmList.length > 0) {
				that.datalist = []
				jsdmList.forEach((item, index) => {
					var itemJsdm = {
						type: item,
						typeid: index + "",
					}
					that.datalist.push(itemJsdm)
				})
			}

			console.log('节水代码--------------', this.datalist)
  
			// #ifdef APP-PLUS
			// 原生控件对象可用于在屏幕上绘制图片或文本内容 参考地址 https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View
			const res = uni.getSystemInfoSync();
			// 上蒙版
			this.viewTop = new plus.nativeObj.View('maskTop', {
				top: '0px',
				left: '0px',
				height: `${res.statusBarHeight + 44}`,
				width: '100%',
				backgroundColor: 'rgba(64, 64, 64, 0.6)'
			});
			// 下蒙版
			this.viewBottom = new plus.nativeObj.View('maskBott', {
				bottom: '0px',
				left: '0px',
				height: `${res.screenHeight - res.windowHeight - res.statusBarHeight - 44}`,
				width: '100%',
				backgroundColor: 'rgba(64, 64, 64, 0.6)'
			});
			this.viewTop.show();
			this.viewBottom.show();
			// #endif
		},

		methods: {
			// selectJsdm() {
			// 	var that = this
			// 	this.isPop = true
			// 	let jsdmList = JSON.parse(uni.getStorageSync("jsdmList"))

			// 	if (jsdmList.length > 0) {
			// 		that.datalist = []
			// 		jsdmList.forEach((item, index) => {
			// 			var itemJsdm = {
			// 				type: item,
			// 				typeid: index + "",
			// 			}
			// 			that.datalist.push(itemJsdm)
			// 		})
			// 	}

			// 	console.log('节水代码--------------', this.datalist)
			// },

			// finsh() {
			// 	this.isPop = false
			// },

			// SetData() {
			// 	var that = this
			// 	this.isPop = false

			// 	this.datalist.forEach((item, index) => {
			// 		if(item.typeid == that.value) {
			// 			that.jsdm = item.type
			// 		}
			// 	})
			// },

			selectitem(index, item) {
				console.log(item)
				if (index >= 0) {
					this.value = item.typeid;
				} else {
					this.value = ""
				}

				this.userLoginChange(item.type)
			},

			async userLoginChange(jsdm) {
				uni.removeStorageSync('token')
				uni.removeStorageSync('username')
				uni.removeStorageSync('jsdmList')
				var data = {
					Number: aes_encrypt(uni.getStorageSync('phone')),
					jsdm: jsdm
				}
				let res = await appUserChange(data)

				console.log('切换节水代码登录======', res)

				if (res.status === 200) {
					uni.setStorageSync('token', res.response.token)
					uni.setStorageSync('username', res.response.username)
					uni.setStorageSync('jsdmList', JSON.stringify(res.response.jsdmList))
					this.jsdm = res.response.username
					this.jsdmList = res.response.jsdmList
					this.sendData(200)
				} else if (res.status === 500) {
					uni.showToast({
						title: res.msg,
						icon: 'error',
						duration: 6000
					})
				}
			},

			sendData(param) {
				this.$emit('userData', param);
			}
		}
	}
</script>

<style lang="scss">
	$all_width: 256rpx;
	$all_height:66rpx;

	.movable-area {
		height: 100vh;
		width: 750rpx;
		top: 0;
		position: fixed;
		pointer-events: none; //此处要加，鼠标事件可以渗透
		z-index: 999;
		.movable-view {
			width: $all_width;
			height: $all_height;
			pointer-events: auto; //恢复鼠标事件

			// image {
			// 	width: $all_width;
			// 	height: $all_height;
			// }
		}
	}

	.mask {

		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.8);
	}

	.content {
		//width: 50%;
		border-radius: 4px;
		background-color: white;
		/* margin-bottom: 140upx; */
		display: flex;
		flex-direction: column;
	}
</style>
